﻿var WREF = {};

WREF.ElementTypesCollection = {
    Circle: "circle"
    , Ellipse: "ellipse"
    , Image: "image"
    , Line: "path"
//    , Print: "print"
    , Rectangle: "rect"
    , Text: "text"
};
//WREF.MatrixDistributionTypeCollection = {
//    Perimetric: "PERIMETRIC"
//};
WREF.MatrixFixedBorderTypeCollection = {
    Odd: "ODD"
    , Par: "PAR"
};
//WREF.VectorPositionTypesCollection = {
//    BottomLeft: "BOTTOM_LEFT"
//    , BottomMiddle: "BOTTOM_MIDDLE"
//    , BottomRight: "BOTTOM_RIGHT"
//    , LeftMiddle: "LEFT_MIDDLE"
//    , RightMiddle: "RIGHT_MIDDLE"
//    , TopLeft: "TOP_LEFT"
//    , TopMiddle: "TOP_MIDDLE"
//    , TopRight: "TOP_RIGHT"
//};
WREF.VectorPositionTypesCollection = {
    First: "FIRST"
    , Last: "LAST"
    , Middle: "MIDDLE"
//    , MiddleFirst: "MIDDLE_FIRST"
//    , MiddleLast: "MIDDLE_LAST"
};

WREF.LayoutItem = function LayoutItem(type, attributes, events, zIndex) {
    try {
        this.Attributes = (attributes)
                                ? attributes
                                : {};
        this.Events = (events)
                        ? events
                        : [];
        this.Type = (type)
                        ? type
                        : "";
        this.ZIndex = (zIndex)
                        ? zIndex
                        : 0;
    }
    catch(Error) { Common.ShowError(Error); }
};
WREF.LayoutItemAttributes = function LayoutItemAttributes(element, otherAttributes) {
    try {
        Common.ExtendObject(otherAttributes, this);

        if(element)
            Common.ExtendObject(element.Attributes, this);
    }
    catch(Error) { Common.ShowError(Error); }
};

WREF.Canvas = {
    Paper: null
    , Height: ElementSize.GetHeight(window)
    , Width: ElementSize.GetWidth(window)
    , X: 0
    , Y: 0
};
WREF.Elements = null;
WREF.Layout = [];

WREF.BuildLayout = function BuildLayout(element, containerX, containerY, containerWidth, containerHeight, parentElementLayout) {
    var layout = [];
    try {
        if(element)
        {
            var elementAttr;

            if(element.Name)
            {
                elementAttr = {
                    height: containerHeight * 1/3
                    , width: containerWidth * 1/3
                    , x: containerX + containerWidth * 1/3
                    , y: containerY + containerHeight * 1/3
                };

                if(parentElementLayout)
                {
                    layout.push(new WREF.LayoutItem(
                        WREF.ElementTypesCollection.Line
                        , new WREF.LayoutItemAttributes(
                            null
                            , {
                                path: "M" 
                                        + Math.floor(parentElementLayout.x + parentElementLayout.width / 2).toString()
                                        + " " + Math.floor(parentElementLayout.y + parentElementLayout.height / 2).toString()
                                    + " L"
                                        + Math.floor(elementAttr.x + elementAttr.width / 2).toString()
                                        + " " + Math.floor(elementAttr.y + elementAttr.height / 2).toString()
                            }
                        )
                        , null
                        , ""
                        , 1
                    ));
                }

                layout.push(new WREF.LayoutItem(
                    element.Type
                    , new WREF.LayoutItemAttributes(
                        element
                        , elementAttr
                    )
                    , element.Events
                    , 2
                ));
            }

            if((element.ElementsList) && (element.ElementsList.length > 0))
            {
                var centerIndex1 = 1
                    , centerIndex2
                    , centerCellX
                    , centerCellY
                    , centerCellHeight
                    , centerCellWidth
                    , squareGridLayout = WREF.BuildSquareGridLayout(
                        containerWidth
                        , containerHeight
                        , containerX
                        , containerY
                        , element.ElementsList.length + 1
                        , element.MatrixFixedBorderType
                    )
                    , subCellLayout
                    , subElemIndex = 0;

                centerIndex2 = squareGridLayout.Sqrt - 2;
                centerCellX = squareGridLayout.Grid[centerIndex1][centerIndex1].X;
                centerCellY = squareGridLayout.Grid[centerIndex1][centerIndex1].Y;
                centerCellHeight = squareGridLayout.CellHeight * (centerIndex2 - centerIndex1 + 1);
                centerCellWidth = squareGridLayout.CellWidth * (centerIndex2 - centerIndex1 + 1);


                if((element.DrawingOrderList) && (element.DrawingOrderList.length))
                {
                    //#region DrawingOrderList

                    var colIndex
                        , coordinates
                        , coordinatesList
                        , rowIndex;

                    for(var positionIndex = 0; positionIndex < element.DrawingOrderList.length; positionIndex++)
                    {
                        if(subElemIndex < element.ElementsList.length)
                        {
                            coordinatesList = (element.DrawingOrderList[positionIndex][0] instanceof Array)
                                                    ? WREF.GetMatrixCoordinatesList(squareGridLayout.Grid, element.DrawingOrderList[positionIndex])
                                                    : [WREF.GetMatrixCoordinates(squareGridLayout.Grid, element.DrawingOrderList[positionIndex])];

                            for(var coordinatesIndex = 0; coordinatesIndex < coordinatesList.length; coordinatesIndex++)
                            {
                                coordinates = coordinatesList[coordinatesIndex];

                                rowIndex = coordinates[0];
                                colIndex = coordinates[1];

                                if(((rowIndex < centerIndex1) || (rowIndex > centerIndex2))
                                    || ((colIndex < centerIndex1) || (colIndex > centerIndex2)))
                                {
                                    subCellLayout = squareGridLayout.Grid[rowIndex][colIndex];

                                    if(subCellLayout.Empty !== false)
                                    {
                                        layout = layout.concat(WREF.BuildLayout(
                                            element.ElementsList[subElemIndex]
                                            , subCellLayout.X
                                            , subCellLayout.Y
                                            , squareGridLayout.CellWidth
                                            , squareGridLayout.CellHeight
                                            , elementAttr
                                        ));

                                        subCellLayout.Empty = false;

                                        subElemIndex++;
                                    }
                                }
                            }
                        }
                        else
                        {
                            break;
                        }
                    }

                    //#endregion
                }

                if(subElemIndex < element.ElementsList.length)
                {
                    if((element.StartDrawingPositionTypesList) && (element.StartDrawingPositionTypesList.length))
                    {
                        //#region StartDrawingPositionTypesList

                        var colIndex
                            , rowIndex
                            , startDrawingCoordinatesList = 
                                WREF.GetMatrixCoordinates(squareGridLayout.Grid, element.StartDrawingPositionTypesList)
                            , subCellIndex = 0
                            , subCellsDrawedCount = 0
                            , subCellsTotalsCount = Math.pow(squareGridLayout.Sqrt, WREF.GetMatrixDimensionsCount(squareGridLayout.Grid));

                        for(var coordinateIndex = 0; coordinateIndex < startDrawingCoordinatesList.length; coordinateIndex++)
                        {
                            subCellIndex += startDrawingCoordinatesList[coordinateIndex] 
                                                * Math.pow(squareGridLayout.Sqrt, startDrawingCoordinatesList.length - 1 - coordinateIndex);
                        }
                
                        while((subCellsDrawedCount < subCellsTotalsCount) && (subElemIndex < element.ElementsList.length))
                        {
                            if(subElemIndex < element.ElementsList.length)
                            {
                                rowIndex = Math.floor(subCellIndex / squareGridLayout.Sqrt) % squareGridLayout.Sqrt;
                                colIndex = subCellIndex % squareGridLayout.Sqrt;

                                if(((rowIndex < centerIndex1) || (rowIndex > centerIndex2))
                                    || ((colIndex < centerIndex1) || (colIndex > centerIndex2)))
                                {
                                    subCellLayout = squareGridLayout.Grid[rowIndex][colIndex];

                                    if(subCellLayout.Empty !== false)
                                    {
                                        layout = layout.concat(WREF.BuildLayout(
                                            element.ElementsList[subElemIndex]
                                            , subCellLayout.X
                                            , subCellLayout.Y
                                            , squareGridLayout.CellWidth
                                            , squareGridLayout.CellHeight
                                            , elementAttr
                                        ));

                                        subElemIndex++;
                                    }
                                }

                                subCellIndex++;
                                subCellsDrawedCount++;
                            }
                        }

                        //#endregion
                    }
                    else
                    {
                        for(rowIndex = 0; rowIndex < squareGridLayout.Sqrt; rowIndex++)
                        {
                            if(subElemIndex < element.ElementsList.length)
                            {
                                for(colIndex = 0; colIndex < squareGridLayout.Sqrt; colIndex++)
                                {
                                    if(subElemIndex < element.ElementsList.length)
                                    {
                                        if(((rowIndex < centerIndex1) || (rowIndex > centerIndex2))
                                            || ((colIndex < centerIndex1) || (colIndex > centerIndex2)))
                                        {
                                            subCellLayout = squareGridLayout.Grid[rowIndex][colIndex];

                                            if(subCellLayout.Empty !== false)
                                            {
                                                layout = layout.concat(WREF.BuildLayout(
                                                    element.ElementsList[subElemIndex]
                                                    , subCellLayout.X
                                                    , subCellLayout.Y
                                                    , squareGridLayout.CellWidth
                                                    , squareGridLayout.CellHeight
                                                    , elementAttr
                                                ));

                                                subElemIndex++;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    catch(Error) { Common.ShowError(Error); }
    return layout;
};
WREF.BuildSquareGridLayout = function BuildSquareGridLayout(width, height, x, y, elementsCount, matrixFixedBorderType) {
    var squareGridLayout = { Grid: null, CellHeight: null, CellWidth: null, Sqrt: null };
    try {
        if((width) && (height) && (elementsCount))
        {
            if(elementsCount < 5)
                elementsCount = 5;

            if(!x)
                x = 0;
            if(!y)
                y = 0;

            squareGridLayout.Sqrt = Math.ceil(Math.sqrt(elementsCount));

            switch(matrixFixedBorderType)
            {
                case WREF.MatrixFixedBorderTypeCollection.Odd:
                    if(squareGridLayout.Sqrt % 2 == 0)
                        squareGridLayout.Sqrt++;
                    break;
                case WREF.MatrixFixedBorderTypeCollection.Par:
                    if(squareGridLayout.Sqrt % 2 == 1)
                        squareGridLayout.Sqrt++;
                    break;
                default:
                    break;
            }

            squareGridLayout.CellHeight = Math.floor(height / squareGridLayout.Sqrt);
            squareGridLayout.CellWidth = Math.floor(width / squareGridLayout.Sqrt);
            squareGridLayout.Grid = new Array(squareGridLayout.Sqrt);

            for(var rowIndex = 0; rowIndex < squareGridLayout.Sqrt; rowIndex++)
            {
                var layoutRow = new Array(squareGridLayout.Sqrt);

                for(var colIndex = 0; colIndex < squareGridLayout.Sqrt; colIndex++)
                {
                    layoutRow[colIndex] = {
                        Empty: true
                        , X: x + colIndex * squareGridLayout.CellWidth
                        , Y: y + rowIndex * squareGridLayout.CellHeight
                    };
                }

                squareGridLayout.Grid[rowIndex] = layoutRow;
            }
        }
    }
    catch(Error) { Common.ShowError(Error); }
    return squareGridLayout;
};
WREF.DrawLayout = function DrawLayout(graph, layoutItemsList) {
    try {
        if((graph) && (layoutItemsList))
        {
            layoutItemsList.sort(WREF.SortLayoutItemsListByZIndex);

            for(var layoutItemIndex = 0; layoutItemIndex < layoutItemsList.length; layoutItemIndex++)
            {
                var layoutItem = layoutItemsList[layoutItemIndex];

                var element = graph[layoutItem.Type]();

                switch(layoutItem.Type)
                {
                    case WREF.ElementTypesCollection.Circle:
                        layoutItem.Attributes.cx = layoutItem.Attributes.x + (layoutItem.Attributes.width / 2);
                        layoutItem.Attributes.cy = layoutItem.Attributes.y + (layoutItem.Attributes.height / 2);
                        layoutItem.Attributes.r = (Math.min(layoutItem.Attributes.width, layoutItem.Attributes.height) / 2);

                        layoutItem.Attributes.x = undefined;
                        layoutItem.Attributes.y = undefined;

                        break;
                    case WREF.ElementTypesCollection.Ellipse:
                        layoutItem.Attributes.cx = layoutItem.Attributes.x + (layoutItem.Attributes.width / 2);
                        layoutItem.Attributes.cy = layoutItem.Attributes.y + (layoutItem.Attributes.height / 2);
                        layoutItem.Attributes.rx = layoutItem.Attributes.width / 2;
                        layoutItem.Attributes.ry = layoutItem.Attributes.height / 2;

                        layoutItem.Attributes.x = undefined;
                        layoutItem.Attributes.y = undefined;
                        break;
                    case WREF.ElementTypesCollection.Line:
                        
                        break;
                    default:
                        break;
                }

                element.attr(layoutItem.Attributes);

                element.LayoutItemData = { Data: layoutItem };

                if(layoutItem.Events)
                {
                    for(var eventIndex = 0; eventIndex < layoutItem.Events.length; eventIndex++)
                    {
                        var event = layoutItem.Events[eventIndex];

                        for(var handlerIndex = 0; handlerIndex < event.HandlersList.length; handlerIndex++)
                            element[event.Name](event.HandlersList[handlerIndex]);
                    }
                }
            }
        }
    }
    catch(Error) { Common.ShowError(Error); }
};
WREF.GetMatrixCoordinates = function GetMatrixCoordinates(matrix, vectorPositionTypeList) {
    var coordinates = [];
    try {
        if(matrix)
        {
            if(!vectorPositionTypeList)
                vectorPositionTypeList = [];

            var dimensionsCount = WREF.GetMatrixDimensionsCount(matrix)
                , dimensionLength; 

            for(var dimensionIndex = 0; dimensionIndex < dimensionsCount; dimensionIndex++)
            {
                dimensionLength = WREF.GetMatrixDimensionLength(matrix, dimensionIndex);

                switch(vectorPositionTypeList[dimensionIndex])
                {
                    case WREF.VectorPositionTypesCollection.First:
                        coordinates.push(0);
                        break;
                    case WREF.VectorPositionTypesCollection.Last:
                        coordinates.push(dimensionLength - 1);
                        break;
                    case WREF.VectorPositionTypesCollection.Middle:
                        coordinates.push(Math.floor(dimensionLength / 2));
                        break;
                    default:
                        coordinates.push(0);
                        break;
                }
            }
        }
    }
    catch(Error) { Common.ShowError(Error); }
    return coordinates;
};
WREF.GetMatrixCoordinatesList = function GetMatrixCoordinatesList(matrix, vectorPositionTypeList) {
    var coordinatesList = [];
    try {
        if((matrix) && ((vectorPositionTypeList) && (vectorPositionTypeList.length == 2)))
        {
            var coordinatesEnd
                , coordinatesStart
                , deltaIndex
                , factor
                , fixedIndex
                , fixedPosition
                , from
                , to;

            coordinatesStart = WREF.GetMatrixCoordinates(matrix, vectorPositionTypeList[0]);
            coordinatesEnd = WREF.GetMatrixCoordinates(matrix, vectorPositionTypeList[1]);

//            coordinatesList.push(coordinatesStart);

            if(coordinatesStart[0] == coordinatesEnd[0])
            {
                fixedIndex = 0;
                deltaIndex = 1;
            }
            else
            {
                fixedIndex = 1;
                deltaIndex = 0;         
            }

            fixedPosition = coordinatesStart[fixedIndex];

            factor = (coordinatesStart[deltaIndex] <= coordinatesEnd[deltaIndex])
                            ? 1
                            : -1;

            from = coordinatesStart[deltaIndex];
            to = coordinatesEnd[deltaIndex];

//            if(coordinatesStart[deltaIndex] <= coordinatesEnd[deltaIndex])
//            {
//                from = coordinatesStart[deltaIndex] + 1;
//                to = coordinatesEnd[deltaIndex] - 1;
//            }
//            else
//            {
//                from = coordinatesEnd[deltaIndex] + 1;
//                to = coordinatesStart[deltaIndex] - 1;
//            }

            for(var position = from; position != to; position = position + 1 * factor)
            {
                var coordinate = new Array(2);

                coordinate[fixedIndex] = fixedPosition;
                coordinate[deltaIndex] = position;

                coordinatesList.push(coordinate);
            }

//            coordinatesList.push(coordinatesEnd);
        }
    }
    catch(Error) { Common.ShowError(Error); }
    return coordinatesList;
};
WREF.GetMatrixDimensionLength = function GetMatrixDimensionLength(matrix, dimension) {
    var dimensionLength = -1;
    try {
        if((matrix) && ((dimension != undefined) && (dimension != null)))
        {
            var currentDimension = matrix
                , dimensionsCount = WREF.GetMatrixDimensionsCount(matrix);

            if(dimension <= dimensionsCount)
            {
                for(var dimensionIndex = 0; dimensionIndex < dimension; dimensionIndex++)
                    currentDimension = currentDimension[dimensionIndex];

                dimensionLength = currentDimension.length;
            }
        }
    }
    catch(Error) { Common.ShowError(Error); }
    return dimensionLength;
};
WREF.GetMatrixDimensionsCount = function GetMatrixDimensionsCount(matrix) {
    var dimensionsCount = 0;
    try {
        if(matrix)
        {
            var currentDimension = matrix;

            while(currentDimension[dimensionsCount] instanceof Array)
            {
                dimensionsCount++;
                currentDimension = currentDimension[dimensionsCount];
            }

            dimensionsCount++;
        }
    }
    catch(Error) { Common.ShowError(Error); }
    return dimensionsCount;
};
WREF.SortLayoutItemsListByZIndex = function SortLayoutItemsListByZIndex(itemA, itemB) {
    try {
        return ((itemA.ZIndex < itemB.ZIndex)
                    ? -1
                    : (itemA.ZIndex == itemB.ZIndex)
                            ? 0
                            : 1);
    }
    catch(Error) { Common.ShowError(Error); }
    return 0;
};

WREF.Element_MouseOver = function Element_MouseOver(e) {
    try {
        var event = e;
    }
    catch(Error) { Common.ShowError(Error); }
};

WREF.Elements = { 
    Name: "Name"
    , Attributes: {
        src: "lareunicolas.jpg"
        , title: "Name"
    }
    , Type: WREF.ElementTypesCollection.Image
    , ElementsList: [
        { 
            Name: "Name"
            , Attributes: {
                src: "santaanajulian.jpg"
                , title: "Name"
            }
            , Events: [
                { Name: "mouseover", HandlersList: [function(){ alert(1); }, WREF.Element_MouseOver] }
            ]
            , Type: WREF.ElementTypesCollection.Image

            , ElementsList: [
                { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                    , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                    , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                    , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
            ]
        }
        , { 
            Name: "Name"
            , Attributes: {
                src: "santaanajulian.jpg"
                , title: "Name"
            }
            , Type: WREF.ElementTypesCollection.Image
            , ElementsList: [
//                    { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                    , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                    , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                    , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
            ]
        }
        , { 
            Name: "Name"
            , Attributes: {
                src: "santaanajulian.jpg"
                , title: "Name"
            }
            , StartDrawingPositionTypesList: [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.Last]
            , Type: WREF.ElementTypesCollection.Image
            , ElementsList: [
                { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
            ]
        }
        , { 
            Name: "Name"
            , Attributes: {
                src: "santaanajulian.jpg"
                , title: "Name"
            }
            , DrawingOrderList: [
                [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.Last]
                , [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.Last]
                , [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.First]
                , [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.First]
                , [WREF.VectorPositionTypesCollection.Middle, WREF.VectorPositionTypesCollection.Last]
                , [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.Middle]
                , [WREF.VectorPositionTypesCollection.Middle, WREF.VectorPositionTypesCollection.First]
                , [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.Middle]
            ]
            , Type: WREF.ElementTypesCollection.Image
            , ElementsList: [
                {
                    Name: "Name"
                    , Attributes: {
//                            path: "M21.167,5.5,21.167,13.681,6.684,5.318,6.684,25.682,21.167,17.318,21.167,25.5,25.5,25.5,25.5,5.5z"
//                            , title: "Name"
                        title: "Name"
                        , fill: "#00FFFF"
                    }
                    , Type: WREF.ElementTypesCollection.Ellipse
                    , ElementsList: [
                        { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                        , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                        , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                        , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                        , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                        , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                    ]
                }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
            ]
        }
        , { 
            Name: "Name"
            , Attributes: {
                src: "santaanajulian.jpg"
                , title: "Name"
            }
            , DrawingOrderList: [
                [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.Last]
                , [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.Last]
                , [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.First]
                , [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.First]
                , [WREF.VectorPositionTypesCollection.Middle, WREF.VectorPositionTypesCollection.Last]
                , [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.Middle]
                , [WREF.VectorPositionTypesCollection.Middle, WREF.VectorPositionTypesCollection.First]
                , [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.Middle]
            ]
            , MatrixFixedBorderType: WREF.MatrixFixedBorderTypeCollection.Odd
            , StartDrawingPositionTypesList: [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.Last]
            , Type: WREF.ElementTypesCollection.Image
            , ElementsList: [
                { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
            ]
        }
        , { 
            Name: "Name"
            , Attributes: {
                src: "santaanajulian.jpg"
                , title: "Name"
            }
            , DrawingOrderList: [
                [
                    [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.Last]
                    , [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.Last]
                ]
                , [
                    [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.Last]
                    , [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.First]
                ]
                , [
                    [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.First]
                    , [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.First]
                ]
                , [
                    [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.First]
                    , [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.Last]
                ]
            ]
            , MatrixFixedBorderType: WREF.MatrixFixedBorderTypeCollection.Odd
            , Type: WREF.ElementTypesCollection.Image
            , ElementsList: [
                { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
//                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
            ]
        }
        , { 
            Name: "Name"
            , Attributes: {
                src: "santaanajulian.jpg"
                , title: "Name"
            }
            , DrawingOrderList: [
                [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.Last]
                , [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.Last]
                , [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.First]
                , [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.First]
                , [WREF.VectorPositionTypesCollection.Middle, WREF.VectorPositionTypesCollection.Last]
                , [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.Middle]
                , [WREF.VectorPositionTypesCollection.Middle, WREF.VectorPositionTypesCollection.First]
                , [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.Middle]
                , [
                    [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.Last]
                    , [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.Last]
                ]
                , [
                    [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.Last]
                    , [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.First]
                ]
                , [
                    [WREF.VectorPositionTypesCollection.Last, WREF.VectorPositionTypesCollection.First]
                    , [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.First]
                ]
                , [
                    [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.First]
                    , [WREF.VectorPositionTypesCollection.First, WREF.VectorPositionTypesCollection.Last]
                ]
            ]
            , MatrixFixedBorderType: WREF.MatrixFixedBorderTypeCollection.Odd
            , Type: WREF.ElementTypesCollection.Image
            , ElementsList: [
                { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
                , { Name: "Name", Type: WREF.ElementTypesCollection.Rectangle, Attributes: {  fill: "#00FF00", title: "Name" } }
            ]
        }
    ]
};

attachDomReadyEventHandler(function () {
    try {
        WREF.Canvas.Paper = Raphael(WREF.Canvas.X, WREF.Canvas.Y, WREF.Canvas.Width, WREF.Canvas.Height);

        WREF.Layout = WREF.BuildLayout(WREF.Elements, WREF.Canvas.X, WREF.Canvas.Y, WREF.Canvas.Width, WREF.Canvas.Height);

        WREF.DrawLayout(WREF.Canvas.Paper, WREF.Layout);
    }
    catch(Error) { Common.ShowError(Error); }
});